import React from 'react';
import {
  Row, Col, Layout, Card,
} from 'antd';
import Footer from 'components/Footer';
import WrappedLoginForm from './loginForm/LoginForm';
import WrappedRegistrationForm from './registerForm/RegisterForm';

const { Header } = Layout;

export default class Login extends React.Component {
  constructor() {
    super();
    this.state = { key: 'login' };
  }


  render() {
    const tabList = [
      {
        key: 'login',
        tab: '登录',
      },
      {
        key: 'register',
        tab: '注册',
      },
    ];
    const contentList = {
      login: <WrappedLoginForm />,
      register: <WrappedRegistrationForm />,
    };
    const { key } = this.state;
    return (
      <Layout style={{ height: '100vh' }}>
        <Header>
          <h2 style={{ color: '#ECF0F1', float: 'left' }}>
          基于微服务架构的工业互联网平台
          </h2>
        </Header>

        <Row type="flex" justify="space-around" align="middle" style={{ marginTop: 55, height: '75vh' }}>
          <Col span={8}>
            <Card
              hoverable
              style={{ background: '#fff' }}
              tabList={tabList}
              onTabChange={(k) => { this.setState({ key: k }); }}
            >
              {contentList[key]}
            </Card>
          </Col>
        </Row>
        <Footer />
      </Layout>
    );
  }
}
